<template>
  <default-layout>
    <header-close text="活动详情" slot="header">
      <mt-button
        slot="left"
        @click="$router.replace({name: 'home'})"
        icon="back"
        v-if="$route.name === 'activityDetail'">返回首页</mt-button>
      <mt-button slot="right" @click="doShare">
        <i class="xffont xf-fenxiang" slot="icon"></i>&nbsp;分享
      </mt-button>
    </header-close>
    <div class="news-detail" slot="main">
      <h1>{{detail.title}}</h1>
      <div class="desc">
        <div class="date">发布时间：{{detail.publishDate}}</div>
        <div class="sign-up">
          <span>已报{{detail.personCount}}人，限{{detail.signUpCount}}人</span>
        </div>
      </div>
      <div class="read">
        <span>{{detail.clickCount}} 阅读</span>
      </div>
      <div class="info" v-html="detail.content"></div>
    </div>
    <div class="submit" slot="footer" v-if="!loading">
      <mt-button :disabled="Number(detail.signUpType || 0) !== 0" size="large" type="primary" @click="onSubmit">{{detail.signUpTypeName}}</mt-button>
    </div>
    <xf-share ref="share"></xf-share>
  </default-layout>
</template>
<script>
  import HeaderClose from '../../../components/header-close/header-close.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import qs from 'querystring'
  import XfShare from '../../../components/xf-share/xf-share'

  export default {
    components: {
      XfShare,
      DefaultLayout,
      HeaderClose},
    data() {
      return {
        detail: {},
        loading: true
      }
    },
    methods: {
      getDetail() {
        this.$post('/admin/person/sapi/party/activity/getDetails', {id: this.$route.query.id}, loading => { this.loading = loading }).then(res => {
          this.detail = res.data
          this.$refs.share.init({
            title: '党员活动',
            desc: this.detail.title,
            link: location.href.split('#')[0] + `#/activity-detail?${qs.stringify(this.$route.query)}`
          })
        })
      },
      onSubmit() {
        this.$router.push({
          name: 'activityForm',
          query: {
            type: this.detail.activityType,
            id: this.$route.query.id
          }
        })
      },
      doShare() {
        this.$refs.share.run()
      }
    },
    created() {
      this.getDetail()
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../common/style/variable";
  @import "../../../common/style/news-info";
  .sign-up{
    width: 50%;
    display: flex;
    justify-content: flex-end;
  }
  .read{
    padding: 0 0 .2rem .1rem;
    color: #999;
  }
</style>
